<template>
    <div v-if="modelValue" class="edit-dialog-overlay" @click="handleOverlayClick">
      <div class="edit-dialog" @click.stop>
        <h3>{{ title }}</h3>
        <textarea 
          v-model="editContent" 
          class="edit-textarea"
          @keydown.enter.ctrl="handleConfirm"
        ></textarea>
        <div class="dialog-actions">
          <button class="cancel-btn" @click="handleCancel">取消</button>
          <button class="confirm-btn" @click="handleConfirm">确认</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, watch } from 'vue';
  
  const props = defineProps<{
    modelValue: boolean;
    title: string;
    content: string;
  }>();
  
  const emit = defineEmits<{
    'update:modelValue': [value: boolean];
    'confirm': [content: string];
    'cancel': [];
  }>();
  
  const editContent = ref(props.content);
  
  watch(() => props.content, (newContent) => {
    editContent.value = newContent;
  });
  
  const handleConfirm = () => {
    emit('confirm', editContent.value);
    emit('update:modelValue', false);
  };
  
  const handleCancel = () => {
    emit('cancel');
    emit('update:modelValue', false);
  };
  
  const handleOverlayClick = () => {
    handleCancel();
  };
  </script>
  
  <style lang="scss" scoped>
  .edit-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .edit-dialog {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    min-width: 300px;
    max-width: 500px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  
    h3 {
      margin: 0 0 16px 0;
      font-size: 18px;
    }
  }
  
  .edit-textarea {
    width: 100%;
    min-height: 100px;
    padding: 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-bottom: 16px;
    resize: vertical;
    font-size: 14px;
  
    &:focus {
      outline: none;
      border-color: #409eff;
    }
  }
  
  .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  
    button {
      padding: 8px 16px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s;
  
      &.cancel-btn {
        background-color: #f4f4f5;
        color: #606266;
  
        &:hover {
          background-color: #e9e9eb;
        }
      }
  
      &.confirm-btn {
        background-color: #409eff;
        color: white;
  
        &:hover {
          background-color: #66b1ff;
        }
      }
    }
  }
  </style>